import React, { Component } from 'react';
import {
  View,
  FlatList,
  StyleSheet,
  Text,
  Dimensions,
  Image,
  ScrollView
} from 'react-native';
import styled from 'styled-components';
import Tabs from './Tabs';
import Rankingtabs from './Rankingtabs';
import {
  getRecordList,
  queryByDept,
  queryByPoliceDept,
  queryByPoliceCode
} from '../../api';
import { getToken } from '../../utils/auth';
import { Actions } from 'react-native-router-flux';

export default class sportsRankings extends Component {
  state = {
    tabsConfig: [
      {
        title: '个人',
        color: 'purple',
        borderWidth: 1,
        stuta: 1,
        clicked: () => {}
      },
      {
        title: '部门',
        color: '#7E8184',
        borderWidth: 0,
        stuta: 0,
        clicked: () => {}
      }
    ],
    rankConfig: [
      {
        title: '日排名',
        color: '#fff',
        stuta: 1,
        style: {
          backgroundColor: 'purple',
          borderTopLeftRadius: 10,
          borderBottomLeftRadius: 10
        },
        clicked: () => {}
      },
      {
        title: '周排名',
        color: 'purple',
        stuta: 2,
        style: {
          backgroundColor: '#fff'
        },
        borderRadius: 0,
        clicked: () => {}
      },
      {
        title: '月排名',
        color: 'purple',
        stuta: 3,
        style: {
          backgroundColor: '#fff',
          borderTopRightRadius: 10,
          borderBottomRightRadius: 10
        },
        clicked: () => {}
      }
    ],
    data: [],
    stepData: [],
    error: false,
    errorInfo: '',
    imgUrls: [
      require('../../assets/work/sportsRankings/championship.png'),
      require('../../assets/work/sportsRankings/secondPlace.png')
    ],
    imgUrl: require('../../assets/work/sportsRankings/backtrack.png'),
    stuta: 1,
    code: 1,
    label: ['个人今日当前步数', '部门当前平均步数']
  };
  renderContent = tab => (
    <View
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '150px',
        backgroundColor: '#fff'
      }}>
      <Text>Content of {tab.title}</Text>
    </View>
  );
  getList(token, params) {
    let param = {
      code: params
    };
    getRecordList(token, param)
      .then(res => {
        console.log(res);
        this.state.data = [];
        if (res.code === '0') {
          this.state.data = res.data;
        }
      })
      .catch(error => {
        this.setState({
          error: true,
          errorInfo: error
        });
      });
  }
  getqueryByDept(token, params) {
    let param = {
      code: params
    };
    queryByDept(token, param)
      .then(res => {
        console.log(res);
        this.state.data = [];
        if (res.code === '0') {
          this.state.data = res.data;
        }
      })
      .catch(error => {
        this.setState({
          error: true,
          errorInfo: error
        });
      });
  }
  queryPolice(token) {
    queryByPoliceCode(token)
      .then(res => {
        console.log(res);
        this.state.stepData = [];
        if (res.code === '0') {
          this.state.stepData = res.data;
        }
      })
      .catch(error => {
        this.setState({
          error: true,
          errorInfo: error
        });
      });
  }

  queryPoliceDept(token) {
    queryByPoliceDept(token)
      .then(res => {
        console.log(res);
        this.state.stepData = [];
        if (res.code === '0') {
          this.state.stepData = res.data;
        }
      })
      .catch(error => {
        this.setState({
          error: true,
          errorInfo: error
        });
      });
  }
  currentTab = title => {
    console.log(title);

    let arr = this.state.tabsConfig.map(item => {
      item.color = '#7E8184';
      item.borderWidth = 0;
      if (item.title === title) {
        item.color = 'purple';
        item.borderWidth = 1;
        this.state.stuta = item.stuta;
        this.state.code = 1;
        if (item.stuta === 1) {
          getToken().then(token => {
            this.queryPolice(token);
            this.getList(token, this.state.code);
          });
        } else {
          getToken().then(token => {
            this.queryPoliceDept(token);
            this.getqueryByDept(token, this.state.code);
          });
        }
      }
      return item;
    });
    this.setState({
      tabsConfig: arr
    });
  };

  currentRankTab = title => {
    console.log(title);

    let rankArr = this.state.rankConfig.map(item => {
      item.color = 'purple';
      item.style.backgroundColor = '#fff';
      if (item.title === title) {
        item.color = '#fff';
        item.style.backgroundColor = 'purple';
        this.state.code = item.stuta;
        console.log(this.state.code);
        if (this.state.stuta === 1) {
          getToken().then(token => {
            this.getList(token, this.state.code);
          });
        } else {
          getToken().then(token => {
            this.getqueryByDept(token, this.state.code);
          });
        }
      }
      return item;
    });

    this.setState({
      rankConfig: rankArr
    });
  };
  firstLoadMethod = () => {
    if (this.state.stuta === 1) {
      getToken().then(token => {
        this.queryPolice(token);
        this.getList(token, this.state.code);
      });
    } else {
      getToken().then(token => {
        this.queryPoliceDept(token);
        this.getqueryByDept(token, this.state.code);
      });
    }
  };

  componentDidMount() {
    this.firstLoadMethod();
  }

  render() {
    return (
      <View style={{ backgroundColor: '#FFFFFF' }}>
        <OnTouchableOpacity onPress={() => Actions.home()}>
          <View>
            <Image
              source={this.state.imgUrl}
              style={{ width: 40, height: 20, margin: 5 }}
            />
          </View>
        </OnTouchableOpacity>
        <MovementTextTitle>运动排名</MovementTextTitle>
        <TabContainer>
          <TabsBox>
            {this.state.tabsConfig.map(item => (
              <Tabs
                title={item.title}
                color={item.color}
                borderWidth={item.borderWidth}
                clicked={item.clicked}
                currentTab={title => this.currentTab(title)}
              />
            ))}
          </TabsBox>

          {this.state.stuta === 1 ? (
            <View style={{ height: 80, alignItems: 'center', marginTop: 10 }}>
              <Stutatext style={{ alignItems: 'center' }}>
                {this.state.label[0]}
              </Stutatext>
              {this.state.stepData.map(item => (
                <Text style={{ color: 'purple', fontSize: 30 }}>
                  {item.value}
                  <Text style={{ color: 'black', fontSize: 15 }}>步</Text>
                </Text>
              ))}
            </View>
          ) : (
            <View style={{ height: 80, alignItems: 'center', marginTop: 10 }}>
              <Stutatext style={{ alignItems: 'center' }}>
                {this.state.label[1]}
              </Stutatext>
              {this.state.stepData.map(item => (
                <Text style={{ color: 'purple', fontSize: 30 }}>
                  {item.value}
                  <Text style={{ color: 'black', fontSize: 15 }}>步</Text>
                </Text>
              ))}
            </View>
          )}
          <View style={{ height: 10, backgroundColor: 'gray' }} />
          <View
            style={{ flex: 3, backgroundColor: '#FFF', position: 'relative' }}>
            <Text style={{ fontSize: 20, margin: 10 }}>排名</Text>
            <ScrollView
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                paddingBottom: 200
              }}>
              {this.state.data.map((item, index) => (
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    flex: 1
                  }}>
                  {index === 0 ? (
                    <Image
                      source={this.state.imgUrls[0]}
                      style={{ width: 20, height: 30, margin: 5 }}
                    />
                  ) : index === 1 ? (
                    <Image
                      source={this.state.imgUrls[1]}
                      style={{ width: 20, height: 30, margin: 5 }}
                    />
                  ) : (
                    <View
                      style={{
                        backgroundColor: 'purple',
                        borderStyle: 'solid',
                        width: 25,
                        height: 25,
                        borderRadius: 55,
                        margin: 4,
                        marginTop: 10
                      }}>
                      <Text
                        style={{
                          fontSize: 15,
                          textAlign: 'center',
                          color: '#fff'
                        }}>
                        {index + 1}
                      </Text>
                    </View>
                  )}
                  <Policview>
                    <Text
                      style={{ color: 'black', fontSize: 20, lineHeight: 45 }}>
                      {item.name}
                      <Text style={{ color: 'gray', fontSize: 12 }}>
                        {item.names}
                      </Text>
                    </Text>
                  </Policview>
                  <View>
                    <Text style={{ color: 'purple', fontSize: 15 }}>
                      {item.value}
                      <Text style={{ color: 'gray', fontSize: 15 }}>步</Text>
                    </Text>
                  </View>
                </View>
              ))}
            </ScrollView>
            <Ranking>
              {this.state.rankConfig.map(item => (
                <Rankingtabs
                  title={item.title}
                  color={item.color}
                  clicked={item.clicked}
                  currentTab={title => this.currentRankTab(title)}
                  style={item.style}
                />
                // <View
                //   onPress={() => {
                //     console.log(1);
                //     this.currentRankTab(item.title);
                //   }}
                //   style={{
                //     backgroundColor: item.rankbackgroundColor,
                //     color: item.color
                //   }}>
                //   <RankingtabsText>{item.title}</RankingtabsText>
                // </View>
              ))}
            </Ranking>
          </View>
        </TabContainer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44
  }
});
const TabContainer = styled.View`
  width: 100%;
  height: ${Dimensions.get('window').height};
  background-color: #ffffff;
`;

const RankingtabsText = styled.Text`
  font-size: 20;
  margin-left: 25;
`;

const TabsBox = styled.View`
  flex-direction: row;
  height: 50;
  background-color: white;
`;

const Ranking = styled.View`
  flex-direction: row;
  height: 35;
  width: 280;
  font-size: 50;
  top: 350;
  left: 65;
  position: absolute;
  text-align: center;
  align-items: center;
  background-color: #fff;
  border-radius: 10;
`;
const MovementTextTitle = styled.Text`
  font-size: 40;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const Stutatext = styled.Text`
  font-size: 20;
  font-weight: 200;
`;
const Policview = styled.View`
  width: 280;
  align-self: flex-start;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
